<template>
	<view>
		<view class="flex padding-sm text-grey">
			<view class="flex-sub text-left">{{i18n.index.name}}</view>
			<view class="flex-sub text-center">{{i18n.index.nowprice}}</view>
			<view class="flex-sub text-right">{{i18n.index.rise}}</view>
		</view>
		
		<view class="flex bg-white " v-for="(item, index) in list_" >
		
			<view class="flex-twice " style="padding: 10px;">
				<view class="uni-flex uni-row margin-top-sm"  @click="onClick(index)">
					 
					<view style="width:45%;text-align: left;">
						<text class="text-bold">{{item.name.toUpperCase()}}</text>
						<text class="uni-h6">/USDT {{i18n.contract.xu}}</text>
						<!-- <view class="text-bold">{{item.name.toUpperCase()}}{{item.priceUnit}} {{i18n.contract.xu}}</view> -->
						<!-- <view class="text-gray nowrap">24h {{item.volume}}</view> -->
					</view>
					<view style="width:30%;text-align: left;">
						<view  class="text-bold">{{item.price}}</view>
						<!-- <text class="text-gray nowrap">￥{{item.cnyPrice}} CNY</text> -->
					</view>
					<view style="-webkit-flex: 1;flex: 1;text-align: right;padding-right: 10px;">
						<view :class="item.change > 0 ? 'text-green' : 'text-red' "  >
							{{item.change > 0 ? '+' : ''}}{{item.change}}%
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			}
		},
		computed: {
			list_() {
				return this.list;
			},
			i18n() {
				return this.$t('message');
			}
		},
		methods: {
			onClick(index) {
				
				this.$emit('ToChange',index); 
				 
			}
		}
	}
</script>

<style scoped>
	.uni-label.uni-label-pointer.light {
		display: block;
		width: 150px;
		/* color: #ffffff; */
		text-align: center;
		float: right;
		/* border-radius: 4upx; */
		padding: 5px 10px;
		border-radius: 8px;
	}

	.row {
		display: inline;
	}

	.bai {
		color: white;
		height: 33px;
		line-height: 33px;
		width: 95px;
	}

	.nowrap {
		white-space: nowrap;
	}

	.cu-list {
		margin-top: 2px;
	}

	.cu-list.grid>.cu-item uni-text {
		display: block;
		margin-top: 0px;
		color: #888;
		font-size: 13px;
		line-height: 20px;
	}
</style>
